<template>
  <a-menu inlineCollapsed :inlineIndent="20" mode="inline" @click="handleClick">
    <template v-for="item of $store.state.menu">
      <a-menu-item v-if="!item.children" :key="item.path">{{ item.name }} </a-menu-item>
      <a-sub-menu v-else :key="item.key">
        <template #title> {{ item.name }} </template>
        <a-menu-item v-for="sub of item.children" :key="sub.path"> {{ sub.name }} </a-menu-item>
      </a-sub-menu>
    </template>
  </a-menu>
</template>
<script>
import { defineComponent } from 'vue';
import Menu from '@/menu';

export default defineComponent({
  name: 'Menu',
  data() {
    return {
      menuList: [],
    };
  },
  methods: {
    handleClick(res) {
      console.log('click fired', res);
      const { key } = res;
      this.$router.push(key);
    },
  },
});
</script>
